<template>
	<div class="personal-container layout-pd">
		<el-row :gutter="20">
			<!-- 个人信息卡片 -->
			<el-col :xs="24" :sm="8">
				<el-card shadow="hover" class="user-card" :body-style="{ padding: '25px' }">
					<div class="user-info">
						<el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="handleAvatarChange">
							<img v-if="avatarUrl" :src="avatarUrl" class="avatar" />
							<el-icon v-else class="avatar-uploader-icon"><UserFilled /></el-icon>
							<div class="edit-mask">
								<el-icon><Edit /></el-icon>
							</div>
						</el-upload>

						<div class="user-details">
							<h2 class="username">{{ userInfo.nickname }}</h2>
							<p class="user-title">{{ userInfo.title }}</p>

							<div class="user-stats">
								<div class="stat-item">
									<span class="stat-value">{{ userInfo.followers }}</span>
									<span class="stat-label">粉丝</span>
								</div>
								<div class="stat-item">
									<span class="stat-value">{{ userInfo.following }}</span>
									<span class="stat-label">关注</span>
								</div>
								<div class="stat-item">
									<span class="stat-value">{{ userInfo.likes }}</span>
									<span class="stat-label">获赞</span>
								</div>
							</div>

							<div class="user-meta">
								<p>
									<el-icon><Location /></el-icon> {{ userInfo.location }}
								</p>
								<p>
									<el-icon><Briefcase /></el-icon> {{ userInfo.company }}
								</p>
								<p>
									<el-icon><Link /></el-icon> <a :href="userInfo.website" target="_blank">{{ userInfo.website }}</a>
								</p>
							</div>
						</div>
					</div>

					<div class="user-actions">
						<el-button type="primary" round @click="showEditDialog = true">
							<el-icon><Edit /></el-icon> 编辑资料
						</el-button>
					</div>
				</el-card>

				<!-- 技能标签 -->
				<el-card shadow="hover" class="mt-4 skills-card">
					<template #header>
						<div class="card-header">
							<span>我的技能</span>
							<el-button type="text" @click="showSkillDialog = true">
								<el-icon><Plus /></el-icon>
							</el-button>
						</div>
					</template>
					<div class="skills-tags">
						<el-tag v-for="(skill, index) in userSkills" :key="index" closable @close="removeSkill(index)" class="skill-tag">
							{{ skill }}
						</el-tag>
						<div v-if="userSkills.length === 0" class="empty-tips">暂无技能标签，点击添加</div>
					</div>
				</el-card>
				<el-card shadow="hover" class="mt-4 ranking-card">
					<template #header>
						<div class="card-header">
							<span>用户排行榜</span>
						</div>
					</template>
					<div class="ranking-list">
						<div v-for="(user, index) in topUsers" :key="user.uid" class="ranking-item" @click="viewUserProfile(user.uid)">
							<div class="rank" :class="getRankClass(index)">{{ index + 1 }}</div>
							<el-avatar :size="40" :src="user.photo" class="mr-2" />
							<div class="user-info">
								<div class="username">{{ user.username }}</div>
								<div class="score">刷题数: {{ user.num }}</div>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>

			<!-- 主要内容区域 -->
			<el-col :xs="24" :sm="16">
				<!-- 数据概览 -->
				<el-card shadow="hover" class="stats-card">
					<div class="stats-grid">
						<div class="stat-item stat-primary">
							<div class="stat-icon">
								<el-icon><Document /></el-icon>
							</div>
							<div class="stat-content">
								<div class="stat-value">128</div>
								<div class="stat-label">刷题数量</div>
							</div>
						</div>
						<div class="stat-item stat-success">
							<div class="stat-icon">
								<el-icon><Star /></el-icon>
							</div>
							<div class="stat-content">
								<div class="stat-value">56</div>
								<div class="stat-label">收藏题目</div>
							</div>
						</div>
						<div class="stat-item stat-warning">
							<div class="stat-icon">
								<el-icon><Trophy /></el-icon>
							</div>
							<div class="stat-content">
								<div class="stat-value">12</div>
								<div class="stat-label">竞赛排名</div>
							</div>
						</div>
						<div class="stat-item stat-danger">
							<div class="stat-icon">
								<el-icon><Clock /></el-icon>
							</div>
							<div class="stat-content">
								<div class="stat-value">256</div>
								<div class="stat-label">学习时长(h)</div>
							</div>
						</div>
					</div>
				</el-card>

				<!-- 最近刷题 -->
				<el-card shadow="hover" class="mt-4">
					<template #header>
						<div class="card-header">
							<span>最近刷题</span>
							<el-button type="text" @click="viewAllProblems">查看全部</el-button>
						</div>
					</template>
					<el-table :data="recentProblems" style="width: 100%" height="250">
						<el-table-column prop="title" label="题目" width="180">
							<template #default="{ row }">
								<router-link :to="`/problem/${row.id}`" class="problem-link">{{ row.title }}</router-link>
							</template>
						</el-table-column>
						<el-table-column prop="difficulty" label="难度" width="100">
							<template #default="{ row }">
								<el-tag :type="getDifficultyType(row.difficulty)" effect="dark">
									{{ row.difficulty }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="tags" label="标签">
							<template #default="{ row }">
								<el-tag v-for="tag in row.tags" :key="tag" class="mr-2" size="small">{{ tag }}</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="date" label="时间" width="120" />
						<el-table-column label="操作" width="80">
							<template #default="{ row }">
								<el-button type="text" size="small" @click="viewProblem(row.id)">查看</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
				<el-card shadow="hover" class="mt-4">
					<template #header>
						<div class="card-header">
							<span>我的动态</span>
						</div>
					</template>
					<div v-if="myPosts.length > 0">
						<div v-for="post in myPosts" :key="post.shid" class="post-item">
							<!-- 动态内容展示 -->
							<div class="post-content">{{ post.content }}</div>
							<!-- 图片展示 -->
							<div v-if="post.images && post.images.length > 0" class="post-images">
								<el-image v-for="(img, idx) in post.images" :key="idx" :src="img" :preview-src-list="post.images" fit="cover" class="post-image" />
							</div>
							<!-- 动态元信息 -->
							<div class="post-meta">
								<span class="post-date">{{ post.date }}</span>
								<div class="post-actions">
									<el-button type="text" size="small" @click="editPost(post)">编辑</el-button>
									<el-button type="text" size="small" @click="deletePost(post.shid)">删除</el-button>
								</div>
							</div>
							<el-divider />
						</div>
					</div>
					<el-empty v-else description="暂无动态，快去发布吧~" />
				</el-card>
				<!-- 学习进度 -->
				<el-card shadow="hover" class="mt-4">
					<template #header>
						<div class="card-header">
							<span>学习进度</span>
						</div>
					</template>
					<div class="progress-container">
						<div class="progress-item" v-for="item in learningProgress" :key="item.id">
							<div class="progress-info">
								<span class="progress-title">{{ item.title }}</span>
								<span class="progress-percent">{{ item.percent }}%</span>
							</div>
							<el-progress :percentage="item.percent" :color="item.color" :stroke-width="8" />
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<!-- 编辑资料对话框 -->
		<el-dialog v-model="showEditDialog" title="编辑资料" width="50%">
			<el-form :model="userInfo" label-width="80px">
				<el-form-item label="昵称">
					<el-input v-model="userInfo.nickname" />
				</el-form-item>
				<el-form-item label="职位">
					<el-input v-model="userInfo.title" />
				</el-form-item>
				<el-form-item label="所在地">
					<el-input v-model="userInfo.location" />
				</el-form-item>
				<el-form-item label="公司">
					<el-input v-model="userInfo.company" />
				</el-form-item>
				<el-form-item label="个人网站">
					<el-input v-model="userInfo.website" />
				</el-form-item>
				<el-form-item label="个人简介">
					<el-input v-model="userInfo.bio" type="textarea" :rows="3" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="showEditDialog = false">取消</el-button>
				<el-button type="primary" @click="saveProfile">保存</el-button>
			</template>
		</el-dialog>

		<!-- 添加技能对话框 -->
		<el-dialog v-model="showSkillDialog" title="添加技能" width="40%">
			<el-form>
				<el-form-item label="技能名称">
					<el-input v-model="newSkill" placeholder="请输入技能名称" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="showSkillDialog = false">取消</el-button>
				<el-button type="primary" @click="addSkill">添加</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { UserFilled, Edit, Location, Briefcase, Link, Document, Star, Trophy, Clock, Plus } from '@element-plus/icons-vue';
// 用户排行榜数据
const topUsers = ref([
	{ uid: 1, username: '张三', photo: 'https://randomuser.me/api/portraits/men/1.jpg', num: 985 },
	{ uid: 2, username: '李四', photo: 'https://randomuser.me/api/portraits/women/2.jpg', num: 876 },
	{ uid: 3, username: '王五', photo: 'https://randomuser.me/api/portraits/men/3.jpg', num: 765 },
	{ uid: 4, username: '赵六', photo: 'https://randomuser.me/api/portraits/women/4.jpg', num: 654 },
	{ uid: 5, username: '当前用户', photo: 'https://randomuser.me/api/portraits/men/5.jpg', num: 543 },
]);

// 我的动态数据
const myPosts = ref([
	{
		shid: 6,
		uid: 5,
		content: '今天解决了LeetCode上的一道难题，收获很大！',
		date: '2023-05-18 10:30:00',
		images: ['https://picsum.photos/500/300?random=6'],
		likes: 8,
		comments: 3,
	},
	{
		shid: 7,
		uid: 5,
		content: '分享一个前端学习的好网站，资源很全面',
		date: '2023-05-17 15:20:00',
		images: [],
		likes: 12,
		comments: 5,
	},
]);
const getRankClass = (index) => {
	if (index === 0) return 'rank-gold';
	if (index === 1) return 'rank-silver';
	if (index === 2) return 'rank-bronze';
	return '';
};

const viewUserProfile = (uid) => {
	// 跳转到用户主页
	console.log('查看用户:', uid);
};
// 用户信息
const userInfo = ref({
	nickname: '编程小王子',
	title: '前端开发工程师',
	followers: 128,
	following: 56,
	likes: 1024,
	location: '上海',
	company: '字节跳动',
	website: 'https://github.com/coder',
	bio: '热爱编程，热爱分享，持续学习中...',
});

// 用户头像
const avatarUrl = ref('https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500');

// 用户技能
const userSkills = ref(['JavaScript', 'Vue', 'React', 'Node.js', 'TypeScript']);
const newSkill = ref('');
const showSkillDialog = ref(false);

// 最近刷题记录
const recentProblems = ref([
	{ id: 1, title: '两数之和', difficulty: '简单', tags: ['数组', '哈希表'], date: '2023-05-10' },
	{ id: 2, title: '反转链表', difficulty: '中等', tags: ['链表'], date: '2023-05-09' },
	{ id: 3, title: '有效的括号', difficulty: '简单', tags: ['栈'], date: '2023-05-08' },
	{ id: 4, title: '二叉树的中序遍历', difficulty: '中等', tags: ['二叉树'], date: '2023-05-07' },
	{ id: 5, title: '最长公共前缀', difficulty: '简单', tags: ['字符串'], date: '2023-05-06' },
]);

// 学习进度
const learningProgress = ref([
	{ id: 1, title: '算法基础', percent: 75, color: '#409EFF' },
	{ id: 2, title: '数据结构', percent: 60, color: '#67C23A' },
	{ id: 3, title: '前端框架', percent: 85, color: '#E6A23C' },
	{ id: 4, title: '数据库', percent: 45, color: '#F56C6C' },
]);

// 对话框控制
const showEditDialog = ref(false);

// 方法定义
const handleAvatarChange = (file) => {
	const reader = new FileReader();
	reader.onload = (e) => {
		avatarUrl.value = e.target.result;
	};
	reader.readAsDataURL(file.raw);
};

const addSkill = () => {
	if (newSkill.value.trim() && !userSkills.value.includes(newSkill.value)) {
		userSkills.value.push(newSkill.value);
		newSkill.value = '';
		showSkillDialog.value = false;
	}
};

const removeSkill = (index) => {
	userSkills.value.splice(index, 1);
};

const saveProfile = () => {
	ElMessage.success('资料保存成功');
	showEditDialog.value = false;
};

const viewAllProblems = () => {
	// 跳转到全部题目页面
	console.log('查看全部题目');
};

const viewProblem = (id) => {
	// 跳转到题目详情页
	console.log('查看题目:', id);
};

const getDifficultyType = (difficulty) => {
	switch (difficulty) {
		case '简单':
			return 'success';
		case '中等':
			return 'warning';
		case '困难':
			return 'danger';
		default:
			return 'info';
	}
};
</script>

<style scoped lang="scss">
.personal-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.user-card {
	border-radius: 12px;
	transition: all 0.3s;

	&:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
	}
}

.user-info {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}
.ranking-card {
	border-radius: 12px;

	.ranking-list {
		.ranking-item {
			display: flex;
			align-items: center;
			padding: 12px 0;
			cursor: pointer;
			transition: background-color 0.3s;

			&:hover {
				background-color: #f5f7fa;
			}

			.rank {
				width: 24px;
				height: 24px;
				line-height: 24px;
				text-align: center;
				border-radius: 4px;
				margin-right: 12px;
				font-weight: bold;
				color: white;

				&.rank-gold {
					background: linear-gradient(135deg, #ffd700, #ffa500);
				}

				&.rank-silver {
					background: linear-gradient(135deg, #c0c0c0, #a9a9a9);
				}

				&.rank-bronze {
					background: linear-gradient(135deg, #cd7f32, #a0522d);
				}

				&:not(.rank-gold):not(.rank-silver):not(.rank-bronze) {
					background: #f5f7fa;
					color: #606266;
				}
			}

			.user-info {
				flex: 1;

				.username {
					font-weight: 500;
					margin-bottom: 2px;
					margin-top: 5px;
				}

				.score {
					margin-left: 25px;
					font-size: 12px;
					color: #909399;
				}
			}
		}
	}
}

/* 我的动态样式 */
.post-item {
	padding: 12px 0;

	.post-content {
		font-size: 15px;
		line-height: 1.6;
		margin-bottom: 12px;
	}

	.post-images {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 12px;

		.post-image {
			width: 120px;
			height: 120px;
			border-radius: 4px;
			cursor: pointer;
		}
	}

	.post-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.post-date {
			font-size: 12px;
			color: #909399;
		}

		.post-actions {
			.el-button {
				padding: 0;
				margin-left: 12px;
			}
		}
	}
}

.avatar-uploader {
	position: relative;
	width: 100px;
	height: 100px;
	margin-right: 20px;
	cursor: pointer;

	.avatar {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
		border: 3px solid #fff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.avatar-uploader-icon {
		width: 100%;
		height: 100%;
		font-size: 40px;
		color: #8c939d;
		border-radius: 50%;
		background: #f5f7fa;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px dashed #d9d9d9;
	}

	.edit-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 0.3s;
		color: white;

		.el-icon {
			font-size: 24px;
		}
	}

	&:hover .edit-mask {
		opacity: 1;
	}
}

.user-details {
	flex: 1;

	.username {
		font-size: 24px;
		font-weight: bold;
		margin: 0 0 5px;
		color: #303133;
	}

	.user-title {
		font-size: 14px;
		color: #909399;
		margin: 0 0 15px;
	}
}

.user-stats {
	display: flex;
	margin: 15px 0;

	.stat-item {
		flex: 1;
		text-align: center;

		.stat-value {
			font-size: 18px;
			font-weight: bold;
			color: #303133;
			display: block;
		}

		.stat-label {
			font-size: 12px;
			color: #909399;
		}
	}
}

.user-meta {
	p {
		margin: 8px 0;
		font-size: 14px;
		color: #606266;

		.el-icon {
			margin-right: 5px;
			color: #909399;
		}

		a {
			color: #409eff;
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}
}

.user-actions {
	margin-top: 20px;
	text-align: center;
}

.skills-card {
	border-radius: 12px;

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.skills-tags {
		min-height: 60px;
	}

	.skill-tag {
		margin: 0 8px 8px 0;
		font-size: 14px;
	}

	.empty-tips {
		color: #909399;
		font-size: 14px;
		text-align: center;
		padding: 10px 0;
	}
}

.stats-card {
	border-radius: 12px;

	.stats-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 15px;

		@media (max-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
		}

		@media (max-width: 480px) {
			grid-template-columns: 1fr;
		}
	}

	.stat-item {
		display: flex;
		align-items: center;
		padding: 15px;
		border-radius: 8px;
		color: white;

		&.stat-primary {
			background: linear-gradient(135deg, #409eff, #79bbff);
		}

		&.stat-success {
			background: linear-gradient(135deg, #67c23a, #95de64);
		}

		&.stat-warning {
			background: linear-gradient(135deg, #e6a23c, #ffd700);
		}

		&.stat-danger {
			background: linear-gradient(135deg, #f56c6c, #ff9e9e);
		}

		.stat-icon {
			font-size: 24px;
			margin-right: 15px;
		}

		.stat-value {
			font-size: 20px;
			font-weight: bold;
			margin-bottom: 5px;
		}

		.stat-label {
			font-size: 12px;
			opacity: 0.9;
		}
	}
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
}

.problem-link {
	color: #303133;
	text-decoration: none;

	&:hover {
		color: #409eff;
		text-decoration: underline;
	}
}

.progress-container {
	.progress-item {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}

		.progress-info {
			display: flex;
			justify-content: space-between;
			margin-bottom: 8px;

			.progress-title {
				font-size: 14px;
				color: #606266;
			}

			.progress-percent {
				font-size: 14px;
				font-weight: bold;
				color: #303133;
			}
		}
	}
}

.mt-4 {
	margin-top: 16px;
}

.mr-2 {
	margin-right: 8px;
}
</style>
